<!--
 * @Author: qiaoxin
 * @Date: 2024-04-09 19:35:26
 * @LastEditors: qiaoxin
 * @LastEditTime: 2024-04-16 12:03:50
 * @Description: 
 * @FilePath: \erp-app\src\pages\pm\requirement\detail.vue
-->

<route lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '研发项目立项评审',
    enablePullDownRefresh: true,
    navigationStyle: 'custom',
  },
}
</route>

<template>
  <page-meta :root-font-size="setting.rootFontSize"></page-meta>
  <view style="min-height: 100vh; background-color: #f2f2f1">
    <view style="position: sticky; top: 0; z-index: 9999">
      <wd-navbar title="研发项目立项评审" :bordered="false" safeAreaInsetTop>
        <template #left>
          <wd-icon name="thin-arrow-left" size="22px" color="white" @click="goBack"></wd-icon>
        </template>
      </wd-navbar>
    </view>
    <view style="flex: 1; overflow: auto">
      <!-- <th-card title="">
        <th-form>
          <view style="width: 100%; text-align: center">
            泰和字【{{ form.petitionWord }}】{{ form.petitionNumber }}号
          </view>
          <th-form-item label="产品">
            <text class="text">{{ form.invName }}</text>
          </th-form-item>
          <th-form-item label="规格">
            <text class="text">{{ form.invStd }}</text>
          </th-form-item>
          <th-form-item label="项目分类">
            <text class="text">{{ form.itemDept }}</text>
          </th-form-item>
          <th-form-item label="项目类别">
            <text class="text">{{ form.itemCategory }}</text>
          </th-form-item>

          <th-form-item label="项目归属">
            <text class="text">{{ form.itemBelong }}</text>
          </th-form-item>
          <th-form-item label="二级项目">
            <text class="text">{{ form.secondLevelItem }}</text>
          </th-form-item>
          <th-form-item label="是否募投">
            <text class="text">{{ form.isFundraising }}</text>
          </th-form-item>

          <th-form-item label="拟稿人">
            <text class="text">{{ form.proposerName }}</text>
          </th-form-item>
          <th-form-item label="申请部门">
            <text class="text">{{ form.proposerDept }}</text>
          </th-form-item>
          <th-form-item label="项目名称">
            <text class="text">{{ form.itemName }}</text>
          </th-form-item>

          <th-form-item label="立项目的">
            <text class="text">{{ form.objective }}</text>
          </th-form-item>

          <th-form-item label="项目技术路线(拟采用)">
            <text class="text">
              <view>1、反应机理:</view>
              <wd-img :width="200" :height="100" :src="form.chemicalUrl" />
              <view>2、涉及主要反应步骤描述:</view>
              {{ form.petitionDesc }}
            </text>
          </th-form-item>

          <th-form-item label="简述项目产品性能及主要用途">
            <text class="text">
              <view>1、产品性能:</view>
              {{ form.petitionPerformance }}
              <view>2、主要用途:</view>
              {{ form.petitionBriefly }}
            </text>
          </th-form-item>
          <th-form-item
            label="附件"
            class="form-demandDesc form-file"
            v-if="form.fileEntityList && form.fileEntityList.length"
          >
            <view class="form-file-view">
              <view
                v-for="(file, index) in form.fileEntityList"
                :key="file.fileUrl"
                class="info-row-item"
              >
                <text @click="previewFileHandle(file.fileUrl)">{{ file.fileName }}</text>
              </view>
            </view>
          </th-form-item>
        </th-form>
      </th-card> -->

      <view style="padding: 10rpx; margin-bottom: 24rpx; background-color: white">
        <view style="margin-top: 10rpx; font-size: 50rpx; color: #bc0000; text-align: center">
          山东泰和科技股份有限公司文件
        </view>
        <view style="width: 100%; margin: 10rpx 0; font-weight: bolder; text-align: center">
          泰和研发字【{{ form.petitionWord }}】{{ form.petitionNumber }}号
        </view>
        <view style="width: 100%; height: 1px; margin-top: 10rpx; background: #bc0000"></view>
        <view style="margin: 10rpx 0; font-size: 36rpx; text-align: center">项目立项审批表</view>
        <view style="overflow: auto" class="table-container">
          <table class="analysis-table">
            <tbody>
              <tr>
                <td class="item-petition-label">产品</td>
                <td>
                  {{ form.invName }}
                </td>
              </tr>
              <tr>
                <td class="item-petition-label">规格</td>
                <td>
                  {{ form.invStd }}
                </td>
              </tr>
              <tr>
                <td class="item-petition-label">项目分类</td>
                <td>
                  {{ form.itemDept }}
                </td>
              </tr>
              <tr>
                <td class="item-petition-label">项目类别</td>
                <td>
                  {{ form.itemCategory }}
                </td>
              </tr>

              <tr>
                <td class="item-petition-label">项目归属</td>
                <td>
                  {{ form.itemBelong }}
                </td>
              </tr>

              <tr>
                <td class="item-petition-label">二级项目</td>
                <td>
                  {{ form.secondLevelItem }}
                </td>
              </tr>

              <tr>
                <td class="item-petition-label">是否募投</td>
                <td>
                  {{ form.isFundraising }}
                </td>
              </tr>

              <tr>
                <td class="item-petition-label">拟稿人</td>
                <td>
                  {{ form.proposerName }}
                </td>
              </tr>

              <tr>
                <td class="item-petition-label">申请部门</td>
                <td>
                  {{ form.proposerDept }}
                </td>
              </tr>

              <tr>
                <td class="item-petition-label">项目名称</td>
                <td>
                  {{ form.itemName }}
                </td>
              </tr>

              <tr>
                <td class="item-petition-label">立项目的</td>
                <td>
                  {{ form.objective }}
                </td>
              </tr>

              <tr>
                <td class="item-petition-label">项目技术路线(拟采用)</td>
                <td>
                  <view>
                    <view>1、反应机理:</view>
                    <wd-img
                      :width="200"
                      :height="100"
                      mode="aspectFit"
                      :src="form.chemicalUrl"
                      :enable-preview="true"
                    />
                    <view>2、涉及主要反应步骤描述:</view>
                    {{ form.petitionDesc }}
                  </view>
                </td>
              </tr>

              <tr>
                <td class="item-petition-label">简述项目产品性能及主要用途</td>
                <td>
                  <view>
                    <view>1、产品性能:</view>
                    {{ form.petitionPerformance }}
                    <view>2、主要用途:</view>
                    {{ form.petitionBriefly }}
                  </view>
                </td>
              </tr>

              <tr>
                <td class="item-petition-label">附件</td>
                <td>
                  <view class="form-file-view">
                    <view
                      v-for="(file, index) in form.fileEntityList"
                      :key="file.fileUrl"
                      class="info-row-item"
                    >
                      <text @click="previewFileHandle(file.fileUrl)">{{ file.fileName }}</text>
                    </view>
                  </view>
                </td>
              </tr>
            </tbody>
          </table>
        </view>
      </view>

      <!-- <th-card title="评审意见" v-if="demandOpinionUserName == '2006031401' || form.opinion">
        <view style="width: 100%">
          <view
            v-if="!(form.reviewStatus != 2 && demandOpinionUserName == '2006031401')"
            class="form-demandDesc"
          >
            <text class="text">
              {{ form.opinion }}
            </text>
          </view>
          <view v-else>
            <wd-textarea
              v-model="form.opinion"
              placeholder="请填写评审意见"
              auto-height
              :maxlength="2000"
              show-word-limit
              no-border
              prop="opinion"
              :disabled="!(form.reviewStatus != 2 && demandOpinionUserName == '2006031401')"
            />
          </view>
        </view>
        <wd-button
          :round="false"
          style="width: 100%; margin-top: 20rpx"
          @click="saveDemandOpinion"
          v-if="form.reviewStatus != 2 && demandOpinionUserName == '2006031401'"
        >
          保存
        </wd-button>
      </th-card> -->
      <th-card title="评审意见" v-if="form.opinion">
        <view style="width: 100%">
          <view class="form-demandDesc">
            <text class="text">
              {{ form.opinion }}
            </text>
          </view>
        </view>
      </th-card>

      <th-card title="评审人员签字">
        <th-form>
          <th-form-item
            v-for="item in form.rdProjectUserEntity.filter((item) => item.signatureFlag == 1)"
            :label="item.documentsPostName"
          >
            <wd-img :width="200" :height="100" :src="getProjectName(item, 1)" />
          </th-form-item>
          <th-form-item
            v-for="item in form.rdProjectUserEntity.filter(
              (item) => item.documentsPostCode == '255' && item.userUrl,
            )"
            :label="item.documentsPostName"
          >
            <!-- @click="preview(getProjectName(item, 1))" -->
            <wd-img :width="200" :height="100" :src="getProjectName(item, 1)" />
          </th-form-item>
        </th-form>
      </th-card>

      <!-- <view class="sign-main bg-white" @click="sign" v-if="showSign">
          签字
        </view> -->
      <!-- <view :class="['sign-main', 'bg-white']" @click="sign" v-if="showSignProject">签字</view> -->
      <view :class="['sign-main', 'bg-white']" @click="sign">签字</view>
    </view>

    <wd-action-sheet v-model="showAction" title="" @close="closeSign" @click-modal="closeSign">
      <view class="sign-main-show">
        <!-- <text class="sign-main-show-title">签字</text> -->
        <view class="sign-main-show-line">
          <!-- <wd-img :width="200" :height="100" :src="signature" @click="preview(signature)" /> -->
          <wd-img :width="200" :height="100" :src="signature" @click="signThis" />
        </view>
        <!-- <view class="sign-main-show-btn" @click="signThis">使用该签字</view> -->
        <view class="sign-main-show-btn" @click="signReset">重新签字</view>
      </view>
    </wd-action-sheet>
  </view>
</template>

<script lang="ts" setup>
import { useSetting } from '@/stores/setting';
import { getPersonByPersonCode, uploadSignature } from '@/service/pm-task';
import { formatByDayjs } from '@/utils/util';
import { useUserStore } from '@/stores/user';
import { selectrdDocumentsPostUser, selectrdDocumentsPostDict } from '@/service/pm-requirement';
import { selectPetitionById, updateSignHandle, updateByIdOpinion } from '@/service/itemPetition';

const setting = useSetting();
const userStore = useUserStore();
const showSign = ref(false);
const signature = ref('');
const userInfo = ref({});
const isChiefEngineer = ref('');
const isDeputyChiefEngineer = ref('');
const showAction = ref(false);
const postUserObj: any = ref({});
const rdProjectUserList = ref([]); // 签名列表
const showSignProject = ref(false);
const demandOpinionUserName = ref('');

// 提交表单数据
const form = reactive({
  id: null,
  proposer: null,
  proposerName: null,
  proposerDept: null,
  tenantName: null,
  itemDept: null,
  itemName: null,
  itemCategory: null,
  itemBelong: null,
  secondLevelItem: null,
  itemCode: null,
  isFundraising: null,
  status: null,
  itemDeptId: null,
  tableCode: null,
  createName: null,
  creator: null,
  personCode: null,
  invName: null,
  invStd: null,
  sourceDocuments: '0',
  demandCode: null,
  demandId: null,
  taskCode: null,
  taskId: null,
  instanceId: null,
  chemicalUrl: null,
  chemicalInfo: null,
  fileEntityList: [],
  checkUser: null,
  objective: null,
  petitionDesc: null,
  petitionBriefly: null,
  petitionNumber: null,
  petitionWord: null,
  petitionPerformance: null,
  requirements: null,
  rdFlag: null,
  reviewStatus: null,
  rdProjectUserEntity: [],
  opinion: null,
});

const init = (params) => {
  uni.$off('pm-requirement-sign');
  selectrdDocumentsPostDictList();
  uni.showLoading();
  console.log('------');
  selectPetitionById(params.id)
    .then((res) => {
      console.log('res', res);
      Object.assign(form, res.data);
      form.petitionNumber = numberStringHandle(form.petitionNumber);

      // 判断能不能签字
      const userInfos = userStore.userInfos;
      const cusPerson = userInfos.user.username;
      demandOpinionUserName.value = cusPerson;
      const o = form.rdProjectUserEntity.find((item) => item.userCode == cusPerson);
      if (o) {
        showSignProject.value = true;
      } else {
        showSignProject.value = false;
      }
    })
    .finally(() => {
      uni.stopPullDownRefresh();
      uni.hideLoading();
    })
    .catch((err) => {
      console.log('err', err);
    });
  selectrdDocumentsPostUserFn();
};

onLoad((options) => {
  const params = options.params;
  let obj = {};

  if (params) {
    obj = JSON.parse(params);
  } else {
    obj = options;
  }

  init({
    id: obj.id,
  });
});

const getRdFlat = (flag) => {
  if (flag == '1') {
    return '通过';
  } else if (flag == '0') {
    return '不通过';
  }
};

const sign = () => {
  // uni.navigateTo({
  //   url: '/pages/pm/requirement/sign',
  // });

  // 判断能不能签字
  // if (form.rdFlag == null) {
  //   uni.showToast({
  //     title: '没有评审结果，不允许签字',
  //     icon: 'none',
  //   });
  //   return;
  // }

  // 判断签字
  const userInfos = userStore.userInfos;
  const cusPerson = userInfos.user.username;
  getPersonByPersonCode({
    personCode: cusPerson,
  }).then((res) => {
    const sign = res.data.signature;
    signature.value = sign;
    userInfo.value = res.data;
    if (sign) {
      showAction.value = true;
    } else {
      uni.$on('pm-requirement-sign', (e) => {
        console.log('sign', e);
        signHanle(e);
      });
      uni.navigateTo({
        url: '/pages/pm/requirement/autograph',
      });
    }
  });

  // uni.navigateTo({
  //   url: '/pages/pm/requirement/autograph',
  // });
};

onPullDownRefresh(() => {
  init({
    id: form.id,
  });
});

const goBack = () => {
  uni.navigateBack();
};

const preview = (url) => {
  if (!url) return;
  uni.previewImage({
    urls: [url],
  });
};

const closeSign = () => {
  showAction.value = false;
  uni.$off('pm-requirement-sign');
};

const signHanle = (sign) => {
  const userInfos: any = userInfo.value;
  // // 判断岗位
  // const _isChiefEngineer = isChiefEngineer.value;
  // const _isDeputyChiefEngineer = isDeputyChiefEngineer.value;

  // const params = {
  //   id: form.id,
  // };

  // if (!_isChiefEngineer && !_isDeputyChiefEngineer) {
  //   uni.showToast({
  //     title: '只有总工和副总工才能签字',
  //     icon: 'none',
  //   });
  //   return;
  // }

  // if (_isChiefEngineer) {
  //   // params['chiefEngineer'] = userInfos.id;
  //   params['chiefEngineer'] = userInfos.personCode;
  //   params['chiefEngineerName'] = userInfos.personName;
  //   params['chiefEngineerPost'] = _isChiefEngineer;
  //   params['chiefEngineerUrl'] = sign;
  // } else if (_isDeputyChiefEngineer) {
  //   params['deputyChiefEngineer'] = userInfos.personCode;
  //   params['deputyChiefEngineerName'] = userInfos.personName;
  //   params['deputyChiefEngineerPost'] = _isDeputyChiefEngineer;
  //   params['deputyChiefEngineerUrl'] = sign;
  // }

  console.log('postUserObj', postUserObj.value);
  const rdProjectUserEntity = form.rdProjectUserEntity;
  const o = rdProjectUserEntity.find((item) => item.personId == userInfos.id);
  const params = {
    id: o ? o.id : null,
    demandCode: form.demandCode,
    taskCode: form.taskCode,
    personId: userInfos.id,
    userName: userInfos.personName,
    userCode: userInfos.personCode,
    userUrl: sign,
    userType: postUserObj.value.documentsPostCode,
    documentsPostName: postUserObj.value.documentsPostName,
    documentsPostCode: postUserObj.value.documentsPostCode,
    documentsName: postUserObj.value.documentsName,
    documentsCode: postUserObj.value.documentsCode,
    signatureFlag: postUserObj.value.signatureFlag,
    reviewFlag: postUserObj.value.reviewFlag,
    rdCode: form.businessCode,
    rdId: form.id,
  };

  uni.showLoading({
    mask: true,
  });

  updateSignHandle(params)
    .then((res) => {
      if (res.code == 0) {
        uni.showToast({
          title: '签字成功',
        });

        // setTimeout(() => {
        //   uni.navigateBack();
        // }, 500);

        // 更新签字
        if (!signature.value) {
          uploadSignature({
            id: userInfos.id,
            signature: sign,
          });
        }
        showAction.value = false;
        // 刷新页面
        init({
          id: form.id,
        });
      } else {
        uni.showToast({
          mask: true,
          title: `签字失败,原因${res.msg}`,
          icon: 'none',
        });
      }
    })
    .finally(() => {
      uni.hideLoading();
      // uni.$off('pm-requirement-sign');
    });
};

const signThis = () => {
  const sign = signature.value;
  signHanle(sign);
};

const signReset = () => {
  uni.$on('pm-requirement-sign', (e) => {
    console.log('sign', e);
    signHanle(e);
  });
  uni.navigateTo({
    url: '/pages/pm/requirement/autograph',
  });
};

const previewImg = (url) => {
  if (!url) return;
  const urls = [];
  urls.push(url);
  console.log('url', urls);
  uni.previewImage({
    urls: urls,
    fail: (fail) => {
      console.log('fail', fail);
    },
  });
};

const previewFileHandle = (file) => {
  uni.navigateTo({
    url: '/pages/pm/preview-online?url=' + file,
  });
};

const previewWeb = (url) => {
  uni.navigateTo({
    url: '/pages/pm/preview-online?url=' + url + '&isWeb=1',
  });
};

const selectrdDocumentsPostDictList = async () => {
  try {
    const res = await selectrdDocumentsPostDict({
      webSql: `documents_code = '7'`,
      size: 1000,
    });
    if (res.code !== 0) {
      return;
    }
    rdProjectUserList.value = res.data.records;
  } catch (err) {
    console.log('err', err);
  }
};

const selectrdDocumentsPostUserFn = () => {
  const userInfos = userStore.userInfos;
  const cusPerson = userInfos.user.username;

  selectrdDocumentsPostUser({
    webSql: `user_code = '${cusPerson}' and documents_code = 7`,
    size: 1000,
  })
    .then((res) => {
      if (res.code == 0) {
        if (res.data.records.length) {
          const lrs = res.data.records.find(
            (item) => item.reviewFlag == 1 && item.signatureFlag == 1,
          );
          const lr = res.data.records.find((item) => item.reviewFlag == 1);
          const l = res.data.records;
          let o: any = {};

          if (lrs.length) {
            o = lrs[0];
          } else if (lr.length) {
            o = lr[0];
          } else {
            o = l[0];
          }
          postUserObj.value = o;
          if (o.reviewFlag == 1 || o.signatureFlag == 1) {
            showSign.value = true;
          } else {
            showSign.value = false;
          }
        } else {
          showSign.value = false;
          postUserObj.value = {
            documentsPostName: '参会人员',
            documentsPostCode: '255',
            documentsName: '项目立项',
            documentsCode: '7',
            signatureFlag: 0,
            reviewFlag: 1,
          };
        }
      } else {
        showSign.value = false;
      }
    })
    .catch(() => {
      showSign.value = false;
    });
};

// type 0 获取姓名 1 获取签名
const getProjectName = (item, type = 0, isShow = true) => {
  // const l = form.rdProjectUserEntity.filter((f) => f.userType == item.documentsPostCode);
  // const l = form.rdProjectUserEntity.filter(
  //   (f) => f.userCode == item.userCode && f.userType == item.documentsPostCode,
  // );
  let l = form.rdProjectUserEntity.filter(
    (f) => f.userCode == item.userCode && f.userType == item.documentsPostCode,
  );
  if (isShow) {
    l = form.rdProjectUserEntity.filter(
      (f) => f.userCode == item.userCode && f.userType == item.documentsPostCode,
    );
  } else {
    l = form.rdProjectUserEntity.filter((f) => f.userType == item.documentsPostCode);
  }
  console.log('lll', l);
  let s = '';
  if (l.length) {
    console.log('s', s);
    if (type == 0) {
      s = l.map((item) => item.userName).join(',');
      return s;
    } else {
      // s = l.map((item) => item.userUrl).join(',');
      s = l[0]['userUrl'];
      return s;
    }
  } else {
    return s;
  }
};

const saveDemandOpinion = () => {
  uni.showLoading({
    mask: true,
  });
  updateByIdOpinion({
    id: form.id,
    businessCode: form.businessCode,
    opinion: form.opinion,
  })
    .then((res) => {
      if (res.code != 0) {
        uni.showToast({
          title: res.msg,
          icon: 'none',
        });
        return;
      }
      init({
        id: form.id,
      });
    })
    .finally(() => {
      uni.hideLoading();
    });
};

const numberStringHandle = (d) => {
  if (d === null) return '';
  let s = '';

  if ((d + '').length < 3) {
    const n = 3 - (d + '').length;
    for (let i = 0; i < n; i++) {
      s += '0';
    }
  }

  return s + d;
};
</script>

<style lang="scss" scoped>
@import '../experiment/components/table';

.block .content {
  padding: 0 !important;
}

.card-detail {
  padding: 0 !important;
}

.wd-cell {
  padding-left: 0 !important;
}

.wd-card__title {
  border-left: 4px solid #2e5cf6 !important;
}

.pm-table {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 0 30rpx;

  .pm-title {
    box-sizing: border-box;
    padding-left: 20rpx;
    margin: 40rpx 0;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    border-left: 8rpx solid #2e5cf6;
    border-radius: 4rpx;
  }

  .pm-row {
    display: flex;
    min-height: 60rpx;
    border-bottom: 1px solid #f6f0f0;

    .pm-label {
      display: flex;
      align-items: center;
      width: 20%;
      font-size: 26rpx;
      color: #979494;
    }

    .pm-value {
      display: flex;
      flex: 1;
      align-items: center;
      font-size: 26rpx;
      color: #333;
    }
  }
}

.sign-main {
  // display: flex;
  // align-items: center;
  // justify-content: center;
  // width: 100%;
  // margin: 20rpx 0;
  position: fixed;
  right: 0rpx;
  bottom: 40rpx;
  width: 160rpx;
  height: 80rpx;
  line-height: 80rpx;
  color: white;
  text-align: center;
  background-color: rgb(77 128 240);

  // border-radius: 50%;
  border-top-left-radius: 40rpx;
  border-bottom-left-radius: 40rpx;
}

:deep(.label) {
  width: 160rpx !important;
}

.result-tag {
  padding: 6rpx 14rpx;
  margin: 2rpx 0;
  font-size: 24rpx;
  color: white;
  background-color: #87d068;
  border-radius: 4rpx;
}

.sign-main-show {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .sign-main-show-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80rpx;
    margin-bottom: 20rpx;
    font-size: 30rpx;
    font-weight: bold;
    color: #818181;
    border-bottom: 1px solid #e3e3e3;
  }

  .sign-main-show-line {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    padding: 20rpx;
    margin: 20rpx 0;
    border: 4rpx solid #d0dbff;
    border-radius: 10rpx;
  }

  .sign-main-show-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80rpx;
    border-top: 1px solid #e3e3e3;
  }
}

.info-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.info-list-main {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 10rpx;
  margin: 10rpx 0;
  border: 1px solid #e3e3e3;
  border-radius: 8rpx;

  .info-list-row {
    display: flex;
    width: 100%;

    .info-list-label {
      width: 150rpx;
      font-size: 28rpx;
      color: #808080;
    }

    .info-list-value {
      display: flex;
      flex: 1;
      align-items: center;
      width: 0;
      word-break: break-all;
      white-space: pre-line;
    }
  }
}

.form-demandDesc {
  align-items: flex-start !important;

  .text {
    word-break: break-all;
  }
}

// .info-row-item {
//   padding: 6rpx 0;
//   word-break: break-all;
// }

.info-row-item {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 6rpx 0;
  color: blue;
  word-break: break-all;
}

.text {
  word-break: break-all;
  word-wrap: break-word;
}

:deep(.wd-collapse-item__body) {
  padding: 0 !important;
}

// :deep(.wd-collapse-item__wrapper){
//   height:auto !important;
// }

:deep(.wd-collapse-item__body) {
  padding: 10rpx;
}

:deep(.wd-collapse-item__header) {
  padding-right: 10rpx;
  padding-left: 10rpx;
}

.item-petition-label {
  width: 20vw;
}
</style>
